import React from "react";
import '../../css/zxx/Zxmessage.css';
import { useNavigate } from 'react-router-dom'

function TongZhi() {
    const navigate = useNavigate()
    return (
        <>
            <div>
                <img src="./返回.png" alt="" className="zx-tongtp" onClick={() => navigate('/tar/shou')} />
                <span className="zx-tong">通知</span>
            </div>
            <div>
                <p className="zx-today">今天</p>
                <div className="zx-box">
                    <div className="container">
                        <div className="circle">
                            <i className="iconfont icon-daifukuan"></i>
                        </div>
                        <div className="dot dot1"></div>
                        <div className="dot dot2"></div>
                        <div className="dot dot3"></div>
                        <div className="dot dot4"></div>
                    </div>
                    <div className="zx-messagetext">
                        <p className="zx-messagetext1">付款成功！</p>
                        <p>您已支付服务费用</p>
                    </div>
                </div>
                <div className="zx-box">
                    <div className="container">
                        <div className="circle1">
                            <i className="iconfont icon-fuwuleixing"></i>
                        </div>
                        <div className="dot dot1"></div>
                        <div className="dot dot2"></div>
                        <div className="dot dot3"></div>
                        <div className="dot dot4"></div>
                    </div>
                    <div className="zx-messagetext">
                        <p className="zx-messagetext1">新的服务类型！</p>
                        <p>有新的管道维修服务上线啦</p>
                    </div>
                </div>
                <p className="zx-today">昨天</p>
                <div className="zx-box">
                    <div className="container">
                        <div className="square"></div>
                        <div className="circle2">
                        <i className="iconfont icon-tehui"></i>
                        </div>
                        <div className="dot dot1"></div>
                        <div className="dot dot2"></div>
                        <div className="dot dot3"></div>
                        <div className="dot dot4"></div>
                    </div>
                    <div className="zx-messagetext">
                        <p className="zx-messagetext1">今日特惠</p>
                        <p>今日将拥有一份惊喜特惠！</p>
                    </div>
                </div>
                <p className="zx-today">2025年3月12日</p>
                <div className="zx-box">
                <div className="container">
                        <div className="circle">
                            <i className="iconfont icon-daifukuan"></i>
                        </div>
                        <div className="dot dot1"></div>
                        <div className="dot dot2"></div>
                        <div className="dot dot3"></div>
                        <div className="dot dot4"></div>
                    </div>
                    <div className="zx-messagetext">
                        <p className="zx-messagetext1">信用卡已添加！</p>
                        <p>恭喜您信用卡已添加成功！</p>
                    </div>
                </div>
                <div className="zx-box">
                <div className="container">
                        <div className="circle3">
                            <i className="iconfont icon-geren"></i>
                        </div>
                        <div className="dot dot1"></div>
                        <div className="dot dot2"></div>
                        <div className="dot dot3"></div>
                        <div className="dot dot4"></div>
                    </div>
                    <div className="zx-messagetext">
                        <p className="zx-messagetext1">账户注册成功！</p>
                        <p>恭喜您，已注册成功！</p>
                    </div>
                </div>
            </div>
        </>
    );
}

export default TongZhi;



